<template>
  <svg :data-name="name" :data-length="splitData.length">
    <template v-for="(item, index) in splitData" :key="index">
      
      <text
        :x="x"
        :y="(config.curY - config.disY * index) + 'mm'"
        :fill="fill"
      >
        <template v-for="(span, i) in item" :key="i">
          
          <!-- :style="{ fontSize: config.style.fontSize }" -->
          <TSpan
            v-if="i < 5"
            :seq="i"
            :curY="config.curY - config.disY * index"
            :length="item.length"
            :spaceMark="config.spaceMark"
            :config="config.config"
            v-bind="span"
          >
            {{ renderTspanContent(span, i, item.length) }}
          </TSpan>
        </template>
      </text>
    </template>
  </svg>
</template>

<script setup>
  
import { ref, computed } from 'vue';
// import { chunk } from '@src/utils';
import Custom_Variable from '../CUSTOM';

import TSpan from './Tspan.vue';

const props = defineProps({
  config: Object,
});


/**
 * @method 给数组分组
 * @param arr 原数组
 * @param num 每组个数
 * @returns {Array}
 */
 let chunk = (arr, num) => {
  num = num * 1 || 1;
  let ret = [];
  arr.forEach(function (item, i) {
    if (i % num === 0) {
      ret.push([]);
    }
    ret[ret.length - 1].push(item);
  });
  return ret;
}

// 获取文本的显示宽度，
const getTextWidth = (item, spaceMark, style) => {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  context.font = `${style.fontWeight || ''} ${style.fontSize}px ${style.fontFamily || ''}`;

  let totalWidth = 0;
  for (let i = 0; i < item.length; i++) {
    let text = (item[i].value || '') + (i < item.length - 1 ? (spaceMark || '') : '');
    totalWidth += context.measureText(text).width;
  }

  return totalWidth;
};

const getMmtoPx = (number) => {
  let div = document.createElement('div');
  div.style.width = number;

  document.body.appendChild(div);
  let offsetWidth = div.offsetWidth;
  document.body.removeChild(div);

  return offsetWidth;
};


const splitData = computed(() => chunk(props.config.subItem, props.config.lineCount));

const disY = -2.5;
const curY = computed(() => parseFloat(props.config.y.replace('mm', '')) - (splitData.value.length - 1));
const curX = computed(() => parseFloat(props.config.x.replace('mm', '')) - 0);
const realConfix = computed(() => props.config.config.cx + 'mm');
const realWidth = computed(() => getMmtoPx(realConfix.value) - 3);

const maxTotalWidth = computed(() => {
  return Math.max(...splitData.value.map(item => getTextWidth(item, props.config.spaceMark, props.config.style)));
});

const transformValue = (index) => {
  if (maxTotalWidth.value > realWidth.value) {
    const scale = parseFloat((realWidth.value / maxTotalWidth.value).toFixed(2));
    const disScale = 1 - scale;
    return `translate(${curX * disScale}mm, ${(curY - disY * index) * disScale}mm) scale(${scale})`;
  }
  return '';
};

const renderTspanContent = (span, i, length) => {
  // 这里可以添加 Tspan 内容的逻辑
  return span.value;
};
</script>

<style scoped>
/* 可以添加样式 */
</style>